<script setup lang="ts">
import { reactive, PropType, watch, ref } from 'vue'
import { ElInput, ElMessage } from 'element-plus'
import { Search } from '@/components/Search'
import { Table } from '@/components/Table'

import { adminFaEarconListApi } from '@/api/fa/earcon'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useTable } from '@/hooks/web/useTableTest'
const searchRef = ref() // 搜索的标签
const actionType = ref('')
const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  }
})
const { register, tableObject, methods } = useTable<
  {
    total: number
    list: any[]
  },
  any
>({
  getListApi: adminFaEarconListApi,
  response: {
    data: 'data',
    count: 'count'
  }
})
const dataTable = ref([
  {
    id: 1,
    name: '基本单位', // 规格名称
    unit: '千克',
    total_stock: '100', // 总库存
    lock_stock: '20', // 锁定库存
    number: 1, // 换算基础单位的数量
    selectWeight: 0
  },
  {
    id: 2,
    name: '玉米50公斤', // 规格名称
    unit: '包',
    total_stock: '100', // 总库存
    lock_stock: '20', // 锁定库存
    number: 50, // 换算基础单位的数量
    selectWeight: 0
  },
  {
    id: 3,
    name: '玉米100公斤', // 规格名称
    unit: '包',
    total_stock: '100', // 总库存
    lock_stock: '20', // 锁定库存
    number: 100, // 换算基础单位的数量
    selectWeight: 0
  }
])

const { getList, setSearchParams } = methods

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'name',
    label: '规格名称',
    search: {
      show: true
    }
  },
  {
    field: 'unit',
    label: '基本单位',
    width: 90
  },
  {
    field: 'total_stock',
    label: '总库存',
    width: 90
  },
  {
    field: 'lock_stock',
    label: '锁定库存',
    width: 90
  },
  {
    field: 'number',
    label: '换算数量',
    width: 100
  },
  {
    field: 'action',
    width: 180,
    fixed: 'right',
    label: '操作出库',
    form: {
      show: false
    },
    detail: {
      show: false
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
const state = ref('')
const id = ref('')
const action = async (type: string, row: any = {}) => {
  actionType.value = type
  switch (type) {
    case 'input':
      tableObject.currentRow = row
      if (props.currentRow.weight > selectWeight.value) {
        ElMessage.warning('所选饲料小于应饲喂饲料数')
        state.value = '小于'
      } else if (props.currentRow.weight < selectWeight.value) {
        ElMessage.warning('所选饲料大于应饲喂饲料数')
        state.value = '大于'
      } else {
        state.value = '等于'
        id.value = props.currentRow.id
      }
      break
    default:
      console.log('未知类型')
  }
}

const newFixedSearch = ref({})
watch(
  () => props.currentRow,
  (val: any) => {
    if (!val) return
    // 设置固定条件
    newFixedSearch.value = {
      customer_id: val.id
    }
    tableObject.fixedSearch = newFixedSearch.value
  },
  {
    deep: true,
    immediate: true
  }
)
let selectWeight = ref(0)
watch(
  () => dataTable,
  (val: any) => {
    if (!val) return
    selectWeight.value = 0
    if (props.currentRow.all_weight > 0) {
      selectWeight.value = props.currentRow.all_weight
    }
    dataTable.value.forEach((element) => {
      selectWeight.value += element.selectWeight * element.number
    })
  },
  {
    deep: true,
    immediate: true
  }
)

const init = async () => {
  // 列表查询
  await getList()
}
init()

defineExpose({
  dataTable,
  state,
  id
})
</script>

<template>
  <div>
    <div style="font-size: 20px">
      <span>总需饲料数{{ props.currentRow.weight }}{{ props.currentRow.forage_unit }}</span>
      <br />
      <span>已选择饲料数{{ selectWeight }}{{ props.currentRow.forage_unit }}</span>
    </div>
    <br />
    <Search
      ref="searchRef"
      :schema="allSchemas.searchSchema"
      @search="setSearchParams"
      @reset="setSearchParams"
    />
    <Table
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataTable"
      :loading="tableObject.loading"
      :border="true"
      :pagination="{
        total: tableObject.count
      }"
      @register="register"
      :selection="false"
    >
      <template #action="{ row }">
        <ElInput v-model="row.selectWeight" placeholder="选择出库数" @blur="action('input', row)" />
      </template>
    </Table>
  </div>
</template>
